<template>
  <div>
    <template v-if="$store.state.cart.cartList.length>0">
      <div v-for="item in $store.state.cart.cartList" :key="item.id">
        <p>商品名字：{{ item.goodsName }}</p>
        <p>商品价格：{{ item.goodsPrice}}</p>
        <p>小计：{{ item.goodsPrice*item.buyNumber | currency }}</p>
        <p>购买数量：<button @click="$store.commit('JOIN_CART',{...item,flag:true})">-</button>{{item.buyNumber}}<button
            @click="$store.commit('JOIN_CART',item)">+</button></p>
        <hr>
      </div>
      <h3>合计：{{ $store.getters.sumPrice | currency}}</h3>
    </template>
    <h3 v-else>购物车是空的！</h3>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "CartList",
  computed: {
    ...mapGetters(['sumPrice'])
  }
}
</script>

<style scoped>
</style>